<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Axios 简化测试3</title>
		<script src="../js/vue.js"></script>
		<script src="../js/axios.js"></script>
	</head>
	<body>
		<div id="a">
			<button @click="show()">按钮</button>
			<p>{{msg}}</p>
		</div>

		<script type="text/javascript">
			new Vue({
				el: "#a",
				data() {
					return {
						msg: ""
					}
				},
				methods: {
					show() {
						/*简化方式1：抽取后端服务器地址*/
						axios.defaults.baseURL = "http://localhost:8080"
						axios.get("/web/hello")
							.then(promise => {
								alert(promise.data)
								this.msg = promise.data
							})
						/*简化方式2：箭头函数*/
						axios.get("/web/hello")
							.then(promise => {
								alert(promise.data)
								this.msg = promise.data
							})
						/*简化方式3：async  await简化调用  重点
						问题描述：如果Ajax嵌套的层级较多，则引发“回调地狱”问题
						解决问题：能否将axios中的then进行简化
						语法：
							1.使用async关键字标识函数
							2.使用await关键字标识Ajax请求
							
						*/
					   async function getHello(){
						   //let promise = await axios.get("/web/hello")
						   let {data:result} = await axios.get("/web/hello")
							//alert(promise.data)
							alert(result)
							this.msg=result
					   }
					   getHello()
					}
				}
			})
		</script>
	</body>
</html>
